<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exercício 2.4 - Centro de Notificações TI</title>
    
    <link href=".\assets\css\bootstrap.min.css" rel="stylesheet">
    
    <style>
        /* CSS adicional apenas para destacar a grid*/
        .fmu-debug-col {
            border: 2px dashed #fa1313;
            padding: 20px;
        }
    </style>
</head>
<body class="bg-dark">

    <div class="container mt-5 shadow-sm p-4 bg-white rounded">
        
        <div class="row"> 
            <div class="col-md-12 fmu-debug-col">
                <h1 class="display-2 fw-bold">Status do Sistema</h1>
                <p class="text-muted">Monitoramento em tempo real - Unidade 2</p>
            </div>

            <div class="col-md-12 fmu-debug-col">
                <h3 class="mb-4">Alertas Recentes</h3>
                
                <p class="text-success fw-bold">
                    ● Internet ativa e estável.
                </p>
                
                <p class="text-warning fw-bold">
                    ● Espaço em disco baixo (85%).
                </p>
                
                <p class="text-danger fw-bold">
                    ● Tentativa de acesso não autorizada detectada.
                </p>
            </div>
        </div>
        
        <div class="row mt-4">
            <div class="col-12 text-center border-top pt-3">
                <small class="text-secondary">Desenvolvido para fins didáticos - Módulo de Bootstrap.</small>
            </div>
        </div>
    </div>
</body>
</html>